import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Card, Layout, Avatar, Row, Col, Button, Modal } from 'antd';
import BlankHeader from '../../components/BlankHeader';
import LoadingWrapper from '../../components/LoadingWrapper';
import ModalChangeAvatar from './ModalChangeAvatar';
import ModalChangeEmail from './ModalChangeEmail';
import ModalChangeNickname from './ModalChangeNickname';
import defaultAvatar from '../../assets/avatar.png';
import styles from './index.less';

const { confirm } = Modal;

@connect(({ user, loading }) => ({
  currentUser: user.currentUser,
  loading: !!loading.effects['user/fetch'],
}))
export default class Favorites extends PureComponent {
  state = {
    visibleAvatar: false,
    visibleEmail: false,
    visibleNickname: false,
  };

  componentDidMount() {
    const { currentUser } = this.props;
    if (!currentUser.username) {
      this.getUserInfo();
    }
  }

  getUserInfo = () => {
    const { dispatch } = this.props;
    dispatch({ type: 'user/fetch' });
  };

  handleGoBack = () => {
    const { history } = this.props;
    history.goBack();
  };

  handleLogout = () => {
    const { dispatch } = this.props;

    confirm({
      title: '确定退出登录？',
      onOk() {
        dispatch({ type: 'login/logout' });
      },
      okText: '确定',
      cancelText: '取消',
    });
  };

  handleModalVisible = type => {
    const {
      visibleAvatar: oldAvatar,
      visibleEmail: oldEmail,
      visibleNickname: oldNickname,
    } = this.state;
    switch (type) {
      case 'avatar':
        this.setState({ visibleAvatar: !oldAvatar });
        break;
      case 'email':
        this.setState({ visibleEmail: !oldEmail });
        break;
      case 'nickname':
        this.setState({ visibleNickname: !oldNickname });
        break;
      default:
    }
  };

  render() {
    const { currentUser, loading } = this.props;
    const { visibleAvatar, visibleEmail, visibleNickname } = this.state;

    return (
      <Fragment>
        <BlankHeader onClick={this.handleGoBack}>设置</BlankHeader>
        <LoadingWrapper loading={loading}>
          <Layout className={styles.wrapper}>
            <Card className={styles.accountWrapper}>
              <Row>
                <Col span={4}>
                  <Avatar size="large" src={currentUser.avatar || defaultAvatar} />
                </Col>
                <Col span={16}>
                  <h1>{currentUser.username}</h1>
                </Col>
                <Col span={4} style={{ marginTop: 10 }}>
                  <a onClick={() => this.handleModalVisible('avatar')}>修改</a>
                </Col>
              </Row>
            </Card>
            <Card>
              <Row>
                <Col span={6}>E-mail:</Col>
                <Col span={12}>{currentUser.email && <span>{currentUser.email}</span>}</Col>
                <Col span={6}>
                  <a onClick={() => this.handleModalVisible('email')}>修改</a>
                </Col>
              </Row>
              <br />
              <Row>
                <Col span={6}>昵称:</Col>
                <Col span={12}>{currentUser.nickname && <span>{currentUser.nickname}</span>}</Col>
                <Col span={6}>
                  <a onClick={() => this.handleModalVisible('nickname')}>修改</a>
                </Col>
              </Row>
            </Card>
            <Button
              style={{ marginTop: 50 }}
              size="large"
              type="primary"
              ghost
              onClick={this.handleLogout}
            >
              退出登录
            </Button>
          </Layout>
          <ModalChangeAvatar
            avatar={currentUser.avatar}
            visible={visibleAvatar}
            onCancel={() => this.handleModalVisible('avatar')}
            onOk={() => {
              this.handleModalVisible('avatar');
              this.getUserInfo();
            }}
          />
          <ModalChangeEmail
            email={currentUser.email}
            visible={visibleEmail}
            onCancel={() => this.handleModalVisible('email')}
            onSuccess={() => {
              this.handleModalVisible('email');
              this.getUserInfo();
            }}
          />
          <ModalChangeNickname
            nickname={currentUser.nickname}
            visible={visibleNickname}
            onCancel={() => this.handleModalVisible('nickname')}
            onSuccess={() => {
              this.handleModalVisible('nickname');
              this.getUserInfo();
            }}
          />
        </LoadingWrapper>
      </Fragment>
    );
  }
}
